<template>
  <div class="article-item-container">
    <article-item :article="item" v-for="(item, index) in articleData" :key="index"/>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        @current-change="currentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8083/api'
import articleItem from '@/components/web/articleItem.vue'

export default {
  components: {
    articleItem
  },
  async asyncData () {
    const data = await axios.get('/article/web/query', {
      params: {
        limit: 10,
        pageNo: 1
      }
    })
    return {
      articleData: data.data.result,
      count: data.data.count
    }
  },
  head () {
    return {
      title: '前端摆渡人-首页'
    }
  },
  methods: {
    currentChange (pageNo) {
      window.location.href = `/${pageNo}`
    }
  }
}
</script>

<style lang="scss">
.article-item-container {
  background: #fff;
  min-height: 100%;
  position: relative;
  .page-container {
    position: absolute;
    width: 100%;
    bottom: 20px;
    text-align: center;
  }
}
</style>

